<script setup lang="ts">

import { computed, ref } from 'vue';
defineProps<{
}>()
const speed=ref(0);
function handlePower(){
	if(speed.value==0){
		speed.value=1;
	}else{
		speed.value=0;
	}
}
function handleSpeedUp(){
	if(speed.value<5){
		speed.value++;
	}
	
}
function handleSpeedDown(){
	if(speed.value>0){
		speed.value--;
	}
}
const speedMap=[
	"-1s",
	"2s",
	"1s",
	"0.8s",
	"0.3s",
	"0.2s"
]
const speedSeconds = computed(()=>{
	return speedMap[speed.value];
})

</script>

<template>
  		<div class="fan">
			<!-- <div class="cup-cover"></div> -->
			<div class="head">
				
				<div class="leafs" :style="`--speed:${speedSeconds}`">
					<div class="leaf"></div>
					<div class="leaf"></div>
					<div class="leaf"></div>
					<div class="leaf"></div>
					<div class="leaf"></div>
					<div class="leaf"></div>
				</div>
				
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
			</div>
			<div class="support">

			</div>
			<div class="base">
				<div class="lcd">
					{{ speed?speed:"OFF" }}
				</div>
				<div class="btns">
					<div class="btn" @click="handlePower">O</div>				
					<div class="btn" @click="handleSpeedUp">+</div>
					<div class="btn" @click="handleSpeedDown">-</div>
				</div>
			</div>
		</div>
</template>

<style scoped>
	.fan {
		position: relative;
		/* width: 20em; */
		/* height: 20em; */
		/* background-color: #ccc; */
		display: flex;
		flex-direction: column;
		/* justify-content: flex-start; */
		align-items: center;
		perspective:110em;
		
	}

	.fan .head {
		width: 8em;
		height: 8em;
		/* background-color: #33333333; */
		/* transform: translate(-50%, -50%); */
		border: 0.2em solid #929191;
		border-radius: 50%;
		overflow: hidden;		
		position: relative;	
		z-index: 3;
	}
	
	.fan .head::after {
		content: "";
		width: 2em;
		height: 2em;
		background-color: #888787;
		/* opacity: 0.5; */
		border-radius: 50%;
		position: absolute;
		left:3em;
		top:3em;
	}
	.fan .head .line {
		width: 8em;
		height: 0.2em;
		background-color: #888787;
		/* opacity: 0.5; */
		position: absolute;
		left:0;
		top:4em;
	}
	.fan .head .line:nth-child(2) {
		transform: rotateZ(60deg);
	}
	.fan .head .line:nth-child(3) {
		transform: rotateZ(120deg);
	}
	.fan .head .line:nth-child(4) {
		transform: rotateZ(180deg);
	}
	.fan .head .line:nth-child(5) {
		transform: rotateZ(240deg);
	}
	.fan .head .line:nth-child(6) {
		transform: rotateZ(300deg);
	}


	.fan .head .leafs {
		--speed:-1s;
		width: 100%;
		height: 100%;
		/* position: absolute; */
		/* background-color: aqua; */
		/* display: flex;
		justify-content: center;
		align-items: start; */
		/* animation: rotate 5s linear infinite; */
		animation: rotate var(--speed) linear infinite;
	}

	@keyframes rotate {
		0% {
			transform: rotateZ(360deg);
		}
		100% {
			transform: rotateZ(0deg);
		}
	}

	.fan .head .leafs .leaf {
		width: 1.5em;
		height: 3em;
		/* left:2.5em; */
		background-color: rgb(196, 195, 195);
		/* opacity: 0.5; */
		position: absolute;
		
		left: 26%;
		top: 8%;
		/* transform: translate(-50%, -50%); */
		border-radius: 50%;
		/* transform: rotateY(30deg) rotateX(60deg); */
		/* transform-origin: 4em 4em; */
		transform-origin: 120% 110%;
	}
	
	.fan .head .leafs .leaf:nth-child(1) {
		transform: rotateZ(60deg);
	}

	.fan .head .leafs .leaf:nth-child(2) {
		transform: rotateZ(120deg);
	}

	.fan .head .leafs .leaf:nth-child(3) {
		transform: rotateZ(180deg);
	}

	.fan .head .leafs .leaf:nth-child(4) {
		transform: rotateZ(240deg);
	}

	.fan .head .leafs .leaf:nth-child(5) {
		transform: rotateZ(300deg);
	}

	.fan .head .leafs .leaf:nth-child(6) {
		transform: rotateZ(360deg);
	}

	
	.fan .support {
		width: 1em;
		height: 5em;
		background-color: #757474;
		margin-top: -3em;
		z-index: 2;
	}

	.fan .base {
		width: 7em;
		height: 7em;
		background-color: #615f5f;
		border-radius: 50%;
		margin-top: -2.6em;
		transform: rotateX(65deg);
		z-index: 1;
		box-shadow: 0 1.5em 0.8em #000;
	}
	.fan .base .lcd {
		width: 2em;
		height: 1em;
		background-color: #ccc;
		margin: 2em auto 0 auto;
		border-radius: 0.2em;
		color: red;
		font-size: 1em;
		text-align: center;
		line-height: 1em
	}
	.fan .base .btns {
		width: 100%;
		height: 2em;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}
	.fan .base .btns .btn {
		width: 1em;
		height: 1em;
		border-radius: 50%;
		background-color: #fff;
		font-size: 1em;
		margin-top: 1em;;
		text-align: center;
		line-height: 1em;
		box-shadow: inset 0 0.1em 0.2em #333, 
		0 0.4em 0.2em 0.1em #333;
		cursor: pointer;
	}
</style>